/*
    创建者：shuxiaokai
    创建时间：2021-10-11 22:25
    模块名称：check
    备注：
*/
<template>
    <s-loading v-if="!isValidShareId" :loading="loading" class="check-wrap">
        <div class="content">
            <div class="text-center">
                <img :src="require('@/assets/imgs/logo.png')" width="100" height="100" class="logo">
            </div>
            <h2 class="text-center">{{ projectName }}</h2>
            <div class="d-flex a-center mb-3">
                <el-input v-model="password" type="password" :placeholder="$t('请输入密码')" class="w-200px" show-password clearable></el-input>
                <el-button type="success" :loading="loading2" @click="handleConfirmPassword">{{ $t("确认密码") }}</el-button>
            </div>
            <div class="gray-600">
                <span class="mr-1">{{ $t("过期倒计时") }}：</span>
                <span v-countdown="expire"></span>
            </div>
        </div>
    </s-loading>
    <el-empty v-if="isValidShareId" :description="$t('无效的项目id')"></el-empty>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import type { Response } from "@@/global"

const isBuildHtml = process.env.VUE_APP_BUILD_HTML;

type LinkInfo = {
    projectName: string,
    shareName: string,
    expire: number,
    needPassword: boolean,
};

export default defineComponent({
    data() {
        return {
            projectName: "", //项目名称
            expire: 0, //过期时间
            password: "", //密码
            //===================================其他参数====================================//
            isValidShareId: false, //文档是否存在
            loading: false, //基础数据获取
            loading2: false, //是否加载中
        };
    },
    mounted() {
        console.log("check", typeof isBuildHtml)
        if (isBuildHtml) {
            this.$router.push({
                path: "/view",
            });
        } else {
            this.init()
        }
    },
    methods: {
        //=====================================前后端交互====================================//
        //初始化
        init() {
            // eslint-disable-next-line camelcase
            const { share_id, id } = this.$route.query;
            if (!this.$route.query.id) {
                this.isValidShareId = true;
                return
            }
            this.loading = true;
            const params = {
                shareId: this.$route.query.share_id,
            };
            this.axios.get<Response<LinkInfo>, Response<LinkInfo>>("/api/project/share_info", { params }).then((res) => {
                this.projectName = res.data.projectName;
                this.expire = res.data.expire;
                if (!res.data.needPassword) {
                    this.$router.push({
                        path: "/view",
                        query: {
                            id,
                            share_id,
                        },
                    });
                }
            }).catch((err) => {
                console.error(err);
            }).finally(() => {
                this.loading = false;
            });
        },
        //确认密码
        handleConfirmPassword() {
            // eslint-disable-next-line camelcase
            const { share_id, id } = this.$route.query;
            this.loading2 = true;
            const params = {
                shareId: share_id,
                password: this.password,
            };
            this.axios.get("/api/project/share_check", { params }).then(() => {
                localStorage.setItem("share/password", this.password || "");
                // eslint-disable-next-line camelcase
                localStorage.setItem("share/shareId", share_id as string);
                this.$router.push({
                    path: "/view",
                    query: {
                        id,
                        share_id,
                    },
                });
            }).catch((err) => {
                console.error(err);
            }).finally(() => {
                this.loading2 = false;
            });
        },
    },
})
</script>

<style lang="scss">
.check-wrap {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: $gray-100;
    .content {
        position: absolute;
        display: flex;
        flex-direction: column;
        left: 50%;
        top: 10vh;
        overflow: hidden;
        transform: translate(-50%, 0%);
        background: $white;
        padding: size(50) size(100);
        box-shadow: $box-shadow-sm;
        &>h2 {
            padding: 0;
            margin-bottom: size(20);
            margin-top: size(0);
        }
    }
}
</style>
